<template>
    <div class="teacher-project-view-container">
      <div class="header">
        <el-button type="primary" @click="goBack">返回</el-button>
        <h1>项目任务管理</h1>
      </div>
      <div class="gantt-chart-container">
        <Gantt :data="taskData" :columnsConfig="columnsConfig" :ganttConfig="ganttConfig" />
      </div>
      <div class="task-table-container">
        <el-table :data="tasks" style="width: 100%">
          <el-table-column prop="name" label="任务名" width="180"></el-table-column>
          <el-table-column prop="publishDate" label="任务发布时间" width="180"></el-table-column>
          <el-table-column prop="status" label="任务完成状态" width="180"></el-table-column>
          <el-table-column prop="responsiblePerson" label="任务负责人" width="180"></el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="scope">
              <el-button type="primary" @click="viewTask(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import Gantt from '@/components/GanttChart.vue'
  
  const router = useRouter()
  
  const tasks = ref([
    { name: '任务1', publishDate: '2024-01-01', status: '未完成', responsiblePerson: '张三', planBegin: '2024-01-01', planEnd: '2024-01-10', actualityBegin: '2024-01-02', actualityEnd: '2024-01-09' },
    { name: '任务2', publishDate: '2024-01-05', status: '进行中', responsiblePerson: '李四', planBegin: '2024-01-05', planEnd: '2024-01-15', actualityBegin: '2024-01-06', actualityEnd: '' },
    { name: '任务3', publishDate: '2024-01-10', status: '已完成', responsiblePerson: '王五', planBegin: '2024-01-10', planEnd: '2024-01-20', actualityBegin: '2024-01-11', actualityEnd: '2024-01-19' },
    // 更多任务
  ])
  
  const columnsConfig = [
    { prop: 'name', label: '任务名' },
    { prop: 'publishDate', label: '任务发布时间' },
    { prop: 'status', label: '任务完成状态' },
    { prop: 'responsiblePerson', label: '任务负责人' },
  ]
  
  const ganttConfig = {
    planBeginColumn: 'planBegin',
    planEndColumn: 'planEnd',
    actualityBeginColumn: 'actualityBegin',
    actualityEndColumn: 'actualityEnd'
  }
  
  const taskData = ref([...tasks.value])
  
  const viewTask = (task) => {
    // 处理查看任务逻辑，可以根据任务名称或其他信息进行路由跳转
    router.push({ name: 'task-detail', query: { task: JSON.stringify(task) } })
  }
  
  const goBack = () => {
    router.back()
  }
  </script>
  
  <style scoped>
  .teacher-project-view-container {
    padding: 20px;
    max-width: 1200px;
    margin: auto;
  }
  
  .header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .header h1 {
    flex: 1;
    text-align: center;
    margin: 0;
    color: #333;
    font-weight: 700;
  }
  
  .gantt-chart-container {
    margin-bottom: 40px;
  }
  
  .task-table-container {
    margin-top: 20px;
  }
  </style>
  